<!-- 证件识别 -->
<template>
  <view>
    <view class="container">
      <view class="gd"></view>
      <view class="text-color">请拍摄并上传您的身份证照片</view>
      <view class="text-color-desc">请上传身份证照片，仅用于身份核实</view>

      <view class="uploadBox">
        <view style="width: 47%;" class="img-border">
          <view class="uploadItem">
            <view class="imgBox imgEx1">
<!--              <view class="leftTop"></view>-->
<!--              <view class="leftTop2"></view>-->
<!--              <view class="leftbottom"></view>-->
<!--              <view class="leftbottom2"></view>-->
<!--              <view class="rightTop"></view>-->
<!--              <view class="rightTop2"></view>-->
<!--              <view class="rightbottom"></view>-->
<!--              <view class="rightbottom2"></view>-->
            </view>
            <image class="imgUrl" :src="imgUrl1"></image>
          </view>
          <view @click="uploadImg(1)" class="leftBtn text-lg text-center text-white">点击上传<text style="color:#DAA520 !important">人像面</text></view>
        </view>

        <view style="width: 47%;" class="img-border">
          <view class="uploadItem">
            <view class="imgBox imgEx2">
<!--              <view class="leftTop"></view>-->
<!--              <view class="leftTop2"></view>-->
<!--              <view class="leftbottom"></view>-->
<!--              <view class="leftbottom2"></view>-->
<!--              <view class="rightTop"></view>-->
<!--              <view class="rightTop2"></view>-->
<!--              <view class="rightbottom"></view>-->
<!--              <view class="rightbottom2"></view>-->
            </view>
            <image class="imgUrl" :src="imgUrl2"></image>
          </view>
          <view @click="uploadImg(2)" class="leftBtn text-lg text-center text-white">点击上传<text style="color:#DAA520 !important">国徽面</text></view>
        </view>
      </view>

<!--      <view class="cu-bar bg-white margin-top">-->
<!--        <view class="action sub-title">-->
<!--          <text class="text-xl text-bold text-shadow text-custom">拍摄要求须知</text>-->
<!--          <text class="text-ABC text-custom">requirement</text>-->
<!--        </view>-->
<!--      </view>-->
      <view class="hx"></view>
      <view class="zx margin-left-sm margin-top-lg">
        拍摄须知
      </view>

      <view class="requirement">
<!--        <view>-->
<!--          <text class="text-gray">请上传大陆公民持有的本人有效身份证；</text>-->
<!--        </view>-->
<!--        <view>-->
<!--          <text class="text-gray">拍摄时确保身份证</text>-->
<!--          <text class="text-custom">边框完整，</text>-->
<!--          <text class="text-custom">字体清晰，</text>-->
<!--          <text class="text-custom">亮度均匀；</text>-->
<!--        </view>-->
          <view class="flex">
            <view class="flex-sub text-center">
              <image class="ps-image" src="https://fanhaoapp.oss-cn-nanjing.aliyuncs.com/1723710758088.png" />
              <view class="txt-desc">
                <image class="xz-img" src="../../static/discern/ok.png" />&nbsp;标准拍摄
              </view>
            </view>
            <view class="flex-sub  text-center">
              <image class="ps-image" src="https://fanhaoapp.oss-cn-nanjing.aliyuncs.com/1723710868311.png" />
              <view class="txt-desc">
                <image class="xz-img" src="../../static/discern/ch.png" />&nbsp;拍摄不全
              </view>
            </view>
            <view class="flex-sub text-center">
              <image class="ps-image" src="https://fanhaoapp.oss-cn-nanjing.aliyuncs.com/1723710890744.png" />
              <view class="txt-desc">
                <image class="xz-img" src="../../static/discern/ch.png" />&nbsp;拍摄模糊
              </view>
            </view>
            <view class="flex-sub text-center">
              <image class="ps-image" src="https://fanhaoapp.oss-cn-nanjing.aliyuncs.com/1723710909438.png" />
              <view class="txt-desc">
                <image class="xz-img" src="../../static/discern/ch.png" />&nbsp;闪光过度
              </view>
            </view>
          </view>
          <view class="cn">
            我们郑重承诺，严格保障您的隐私安全
          </view>
<!--        <view class="errorBox">-->
<!--          <view class="item1">-->
<!--            <view class="txt-desc"><image class="xz-img" src="../../static/discern/ok.png" />标准拍摄</view>-->
<!--          </view>-->

<!--          <view class="item2">-->
<!--            <image class="iconImg" src="../../static/discern/no.png" mode="widthFix"></image>-->
<!--          </view>-->
<!--          <view class="item3">-->
<!--            <image class="iconImg" src="../../static/discern/no.png" mode="widthFix"></image>-->
<!--          </view>-->
<!--          <view class="item4">-->
<!--            <image class="iconImg" src="../../static/discern/no.png" mode="widthFix"></image>-->
<!--          </view>-->
<!--        </view>-->
      </view>

      <view class="submitBtn text-custom-bg text-white" @tap="submitData">提交认证</view>

    </view>
  </view>
</template>

<script>
import {authInfo} from '@/common/api/user'
import env from '@/common/utils/env';
import {useStore} from "../../common/store";
export default {
  data() {
    return {
      list: [
        '隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'
      ],
      // ../static/me/zjx_me_bg6.jpg
      imgUrl1: '',
      imgUrl2: ''
    }
  },
  watch: {

  },
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: res => {
        console.log(res.windowHeight)
      }
    });
  },
  mounted() {

  },
  methods: {
    //头像上传
    uploadImg(flag) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          this.uploadImages(res,flag)
        }
      });
    },
    uploadImages(res,flag) {
      let _this = this
      uni.uploadFile({
        url: `${env.baseurl}/api/user/uploadImage`,
        filePath:  res.tempFilePaths[0],
        name: 'file',
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          if(data && data.code == '200') {
            if(flag == 1) {
             this.imgUrl1 = data.data.filePath
            } else {
              this.imgUrl2 = data.data.filePath
            }
          } else {
            uni.showToast({
              title: '头像上传失败,请重试！',
              duration: 2000,
              icon: 'none'
            });
          }
        }
      });
    },
    async submitData() {
      if (!this.imgUrl1) {
        uni.showToast({
          title: '请上传正面！',
          duration: 2000,
          icon: 'none'
        });
        return false
      }
      if (!this.imgUrl2) {
        uni.showToast({
          title: '请上传反面！',
          duration: 2000,
          icon: 'none'
        });
        return false
      }
      let data = {};
      const store = useStore();
      let id = store.userId
      data['urlZm'] = this.imgUrl1
      data['urlFm'] = this.imgUrl2
      await authInfo(id, data).then(res => {
        console.log('res:',res)
        uni.showToast({
          title: res.code=='200'?'操作成功！':'网络忙,稍候重试!',
          duration: 2000,
          icon: 'none'
        });
        if(res.code == '200') {
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          },1000)
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .gd{
    height: 20rpx;
    width: 100wh;
    background: rgb(247,247,247);
  }
  .text-color{
    color: #EAB769;
    font-size: 34rpx;
    margin-top: 38rpx;
    margin-left: 31rpx;
  }
  .text-color-desc{
    font-size: 26rpx;
    color: #989898;
    margin-top: 20rpx;
    margin-left: 31rpx;
    margin-bottom: 60rpx;
  }
}

.uploadBox {
  padding: 15rpx 20rpx 40rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;

  .img-border{
    border: 1px solid rgb(247,247,247);
  }

  .leftBtn {
    width: 100%;
    height: 75rpx;
    line-height: 75rpx;
    color: black;
    //background-color: #007aec;
    border-radius: 0 0 12rpx 12rpx;
  }

  .uploadItem {
    width: 100%;
    height: 255rpx;
    //background-color: #f1f7ff;
    border-radius: 15rpx;
    padding: 30rpx;
    position: relative;

    .imgUrl {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .imgBox {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .imgEx1 {
      background: url('https://fanhaoapp.oss-cn-nanjing.aliyuncs.com/1723710947882.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .imgEx2 {
      background: url('https://fanhaoapp.oss-cn-nanjing.aliyuncs.com/1723711009581.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .leftTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      left: 0;
    }

    .leftTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      top: 0;
    }

    .leftbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .leftbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .rightTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
    }

    .rightTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      top: 0;
    }

    .rightbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .rightbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}

.distinguishBox {
  padding: 5rpx 30rpx 20rpx;
  background: white;

  view {
    margin-bottom: 20rpx;
  }
}

.disLabel {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
  min-width: 142rpx;
  display: inline-block;
  margin-right: 5rpx;
}

.requirement {
  padding: 10rpx 30rpx 26rpx;
  background: white;
    .xz-img {
      width: 20rpx;
      height: 20rpx;
    }
    .txt-desc {
      font-size: 22rpx;
      color: #8E8E8E;
    }
    .ps-image{
      width: 142rpx;
      height: 100rpx;
    }
    .cn{
      font-size: 24rpx;
      color: #939292;
      width: 100wh;
      text-align: center;
      margin-top: 80rpx;
    }
  }

.submitBtn {
  width: 90%;
  height: 90rpx;
  background: #007aec;
  line-height: 90rpx;
  margin: 0rpx auto;
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  border-radius: 12rpx;
}
.hx{
  width: 100wh;
  margin: 20rpx;
  background: #EAEAEA;
  height: 1rpx;
}
.zx{
  font-size: 30rpx;
  color: #515252;

}
</style>
